import React, {
  Component,
  useState,
  useEffect,
  useRef
} from "react";
import {
  Text,
  View,
  FlatList,
} from "react-native";
import Content from "../../components/content/content"
import styles from "./view-money-sheet";
import MoneyCell from '../../components/money-cell/money-cell';

import * as api from "../../api";

export default function ViewMoney(props) {
  const [money, setMoney] = useState(0);
  const [allMoney, setAllMoney] = useState(0);
  const [data, setData] = useState([]);

  const getMoney = async () => {
    global.showLoading();
    try {
      await api.getMoney().then(res => {
        setMoney(res.balance);
        setAllMoney(res.total_balance);
      });
      await api.getIncome().then(res => {
        if (res) {
          setData(res.monthly_income);
        }
      });
    } catch (e) {
      global.showToast(e);
    } finally {
      global.closeLoading();
    }
  };

  useEffect(() => {
    getMoney();
  }, [])

  return (
    <Content>
			<View style={styles.content}>
        <View style={styles.header}>
          <View>
            <Text>当前豆子:</Text>
          </View>
          <View>
            <Text style={{fontSize:20}}>{(money/100).toFixed(1)}</Text>
          </View>
          <View>
            <Text>累计: {(allMoney/100).toFixed(1)}</Text>
          </View>
        </View>

        <View style={styles.middle}>
          <Text>每月收益账单</Text>
        </View>
        {
          data.length===0?
            <View style={styles.footer}><Text>暂无数据</Text></View>:
            <FlatList 
              style={{flex:1}}
              data={data}
              renderItem={({item,index})=>{
                return <MoneyCell key={index} {...item} />
              }}
              scrollEventThrottle={500}
              keyExtractor={(item,index)=>index.toString()}
            />
        }
			</View>
		</Content>
  )
}